<template>
  <div class="chat">
    <ul>
      <li v-for="(v,k) in friends" :key="k" @click="toChatDetails(k)" v-if="v.content">
        <div class="list-img">
          <img :src="v.avatar" />
        </div>
        <div class="list-content">
          <p class="name">{{v.username}}</p>
          <p class="content">{{v.content}}</p>
        </div>
        <div class="list-date">
          <p class="date">{{v.date}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
//消息
export default {
  name: "chat",
  data() {
    return {
      value: "",
      chatList: [
        {
          img: "http://inews.gtimg.com/newsapp_bt/0/10224677559/1000.jpg",
          name: "义勇",
          content: "炭治郎...",
          date: "10-02"
        },
        {
          img:
            "http://5b0988e595225.cdn.sohucs.com/images/20190520/6f4b2591491b456fb4f5a614d583ea90.jpeg",
          name: "祢豆子",
          content: "炭治郎...",
          date: "10-01"
        },
        {
          img:
            "http://img3.imgtn.bdimg.com/it/u=200689530,48250893&fm=11&gp=0.jpg",
          name: "蝴蝶忍",
          content: "炭治郎...",
          date: "10-02"
        },
        {
          img: "http://inews.gtimg.com/newsapp_bt/0/9958851192/1000.jpg",
          name: "我妻意善",
          content: "炭治郎...",
          date: "10-02"
        },
        {
          img:
            "http://wx4.sinaimg.cn/orj360/b90925c6ly1g65fo7w0f9j21hc0u0npd.jpg",
          name: "伊之助",
          content: "炭治郎...",
          date: "10-03"
        }
      ]
    };
  },
  computed: {
    friends() {
      return this.$store.getters.getFriends;
    }
  },
  methods: {
    toChatDetails(k) {
      this.$router.push({
        path: "/chat_details",
        query: {
          k: k
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.chat {
  .title {
    width: 100%;
    height: 55px;
    background: white;

    .user-img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-left: 20px;
      margin-top: 10px;
    }

    p {
      text-align: center;
      color: #1989fa;
    }

    .gd {
      margin-top: 15px;
      float: right;
      margin-right: 20px;
    }
  }

  ul {
    li {
      height: 50px;
      background: white;
      padding: 5px;

      .list-img {
        width: 15%;
        height: 100%;
        float: left;

        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-left: 10px;
        }
      }

      .list-content {
        width: 65%;
        height: 100%;
        float: left;

        .name {
          font-size: 18px;
          margin: 0;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .content {
          font-size: 14px;
          margin: 0;
          color: #787979;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }

      .list-date {
        width: 10%;
        height: 100%;
        float: left;
        margin-left: 5%;

        .date {
          font-size: 12px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>
